<template>
	<!--components/popup/index.wxml-->
	<view class="">
		<view class="" style="height: 200rpx;">

		</view>
		<view class="bottomContainer">
			<view class="container" @click="onShareApp" :style="{'background-color':backgroundBtn}">
				<image class="icon" src="/static/img/icon_share.png" mode=""></image>
				{{text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSinglePage: false,
			};
		},

		components: {},
		props: {
			backgroundBtn: {
				type: String,
				default: '#5E9FFD'
			},
			text: {
				type: String,
				default: '分享'
			},
			//===分享链接
			title: {
				type: String,
				default: ''
			},
			//===分享图片
			imageUrl: {
				type: String,
				default: ''
			},
		},
		watch: {

		},
		mounted() {

		},
		methods: {
			onShareApp() {
				this.$emit("onShare", {
					title: this.title,
					imageUrl: this.imageUrl
				})
			}
		}
	};
</script>
<style lang="scss">
	.bottomContainer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 122rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: #F3F3F3 1px solid;
		box-sizing: content-box;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 99999;

		.container {
			width: 500rpx;
			height: 74rpx;
			border-radius: 37rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #5E9FFD;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}
	}
</style>